1.2 webview_flutter WebViewController

webview_flutter 也采用了 Flutter 中常用的 Controller 模式，通过 WebViewController 可以控制 WebView 的行为。

对 WebViewController 的使用具体可分为两个方面：

• 在 WebViewController 初始化时，注入回调，提供各种事件下的响应
• 在 WebViewController 创建好后，可以通过该对象实例，调用各种操作方法

初始化

在 WebViewController 创建时，通过一组链式调用，对 WebViewController 各种行为的初始化。（在 Dart 中，通过 .. 这种链式操作，是比较优雅的）

列举部分初始化设置（完整的可直接参见 webview_flutter 文档或 WebViewController 源码）：

是否启用 JavaScript：

..setJavaScriptMode(JavaScriptMode.unrestricted)

设置背景色：

..setBackgroundColor(const Color(0x00000000))

设置 JavaScript Bridge：

..addJavaScriptChannel(
  'Toaster',
  onMessageReceived: (JavaScriptMessage message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(message.message)),
    );
  },
)

以这三个示意，具体的行为可参见第二章《flutter_webview》使用。

操作方法

调用 WebViewController 实例方法，能够主动触发 WebView 操作。比如开头实例代码中，创建 controller 的最后一行，调用 loadRequest 方法，实现页面跳转：

..loadRequest(Uri.parse('https://flutter.dev'));

除此之外，WebViewController 还支持很多操作方法，具体如下：

• loadFile：从文件系统加载文件
• loadFlutterAsset：从资源文件加载文件
• loadHtmlString：从字符串加载 HTML
• loadRequest：页面跳转
• currentUrl：当前 URL
• canGoBack：是否可返回
• canGoForward：是否可前进
• goBack：返回
• goForward：前进
• reload：刷新
• clearCache：清缓存
• clearLocalStorage：清 LocalStorage
• setPlatformNavigationDelegate
• runJavaScript：执行 JavaScript
• runJavaScriptReturningResult：执行并返回结果
• addJavaScriptChannel：添加 JS Channel
• removeJavaScriptChannel：删除 JS Channel
• getTitle：获取标题
• scrollTo
• scrollBy
• getScrollPosition
• enableZoom
• setBackgroundColor
• setJavaScriptMode
• setUserAgent
• setOnPlatformPermissionRequest
• ……

获取平台专属实现

WebViewController 是多个平台下的通用实现，通过 WebViewController.platform 方法，能够获取到对应平台下的具体实现。

• Android：AndroidWebViewController

本文作者：Maeiee

本文链接：1.2 webview_flutter WebViewController

版权声明：如无特别声明，本文即为原创文章，版权归 Maeiee 所有，未经允许不得转载！

喜欢我文章的朋友请随缘打赏，鼓励我创作更多更好的作品！